<!doctype html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head >
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style>
        html,
        body,
       table,
        #container {
            width: 100%;
            height: 100%;
        }
    </style>
    <title>圆的绘制和编辑</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="/css/plugins/jsTree/style.min.css" rel="stylesheet">
    <link href="/css/plugins/jqTreeGrid/jquery.treegrid.css"
          rel="stylesheet">
    <link href="/css/plugins/summernote/summernote-0.8.8.css"
          rel="stylesheet">
</head>
<body>
<table>
    <tr>
        <td  style="width: 20%" valign="top">
            <div class="col-sm-3">
                <div class="ibox ibox-body">
                    <div class="ibox-title">
                        <h5>选择部门</h5>
                    </div>
                    <div class="ibox-content">
                        <div id="jstree"></div>
                    </div>
                </div>
            </div>
        </td>
        <td>
            <input id="lu"/>
            <div id="container" ></div>
            <span class="input-card" style="width: 120px">
                <button class="btn" onclick="circleEditor.open()" style="margin-bottom: 5px">开始编辑</button>
                <button class="btn" onclick="circleEditor.close()">结束编辑</button>
            </span>
            <div class="input-item">
                <input type="button" class="btn" value="开始动画" id="start" onclick="startAnimation()"/>
                <input type="button" class="btn" value="暂停动画" id="pause" onclick="pauseAnimation()"/>
            </div>
        </td>
    </tr>
</table>
<div ></div>
<div th:include="include :: footer"></div>
<script type="text/javascript" src="/js/appjs/contract/map/map.js"></script>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script src="https://webapi.amap.com/maps?v=1.4.14&key=34f702bfabb9ec6c25ade58d26cb9030&plugin=AMap.CircleEditor"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script type="text/javascript">
    var map = null;
    function createMap(center,radius) {
        map = new AMap.Map('container', {
            resizeEnable: true
        });
        log.success("创建地图成功");
        var circle = new AMap.Circle({
            center: center,
            radius: radius, //半径
            borderWeight: 3,
            strokeColor: "#FF33FF",
            strokeOpacity: 1,
            strokeWeight: 6,
            strokeOpacity: 0.2,
            fillOpacity: 0.4,
            strokeStyle: 'dashed',
            strokeDasharray: [10, 10],
            // 线样式还支持 'dashed'
            fillColor: '#1791fc',
            zIndex: 50,
        });

        circle.setMap(map)
        // 缩放地图到合适的视野级别
        map.setFitView([ circle ])

    }
    $('#jstree').on("changed.jstree", function(e, data) {
        if (data.selected != -1) {
            if(data.node.original.hasChildren == false){
                /*根据id获取地理位置*/
                var userid = data.selected[0];
                $.ajax({
                    type : "post",
                    url : "/contract/site/getUserSite",
                    data : {
                        'userId' : userid
                    },
                    success : function(data) {
                        if(data != ""){
                            var marker, lineArr = eval("(["+ new Array(data)+"])");
                            marker = new AMap.Marker({
                                map: map,
                                position: [126.688521,45.7411],
                                icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png",
                                offset: new AMap.Pixel(-26, -13),
                                autoRotation: true,
                                angle:-90,
                            });
                            function startAnimation () {
                                marker.moveAlong(lineArr, 200);
                            }
                            // 绘制轨迹
                            var polyline = new AMap.Polyline({
                                path: lineArr,
                                showDir:true,
                                strokeColor: "#28F",  //线颜色
                                // strokeOpacity: 1,     //线透明度
                                strokeWeight: 12,      //线宽
                                // strokeStyle: "solid"  //线样式
                            });
                            /*中心点*/
                            var center = map.getCenter();
                            /*半径*/
                            var radius = "100";
                            /*重置地图*/
                            createMap(center,radius);
                            map.add([polyline]);
                        }
                    }
                });
            }
        }
    });

</script>

</body>
</html>